import React  from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Input } from 'antd';
import styles from './index.less';
import BlockchainExplorer from './blockchain/index'
import store from '../utils/store';


const { Search } = Input;

class IndexPage extends React.Component {

  constructor(props) {
    super(props);
    this.searchClickHandler = this.searchClickHandler.bind(this);
  }

  componentDidMount() {
    const scrollTop = store.getKey(this.props.location.pathname);
    if (scrollTop){
      document.documentElement.scrollTo(0, scrollTop);
    }
  }

  componentWillUnmount() {
    store.setKey(this.props.location.pathname, document.documentElement.scrollTop)
  }

  async searchClickHandler(value) {
    await this.props.dispatch({
      type: 'global/fetch',
      payload: { value: value }
    });
    let data = this.props.data;
    if (!data) {
      router.push('/404')
    } else if (data.prevHash || data.nextHash) {
      router.push(`/block/${data.hash}`);
    } else {
      router.push(`/transaction/${data.hash}`);
    }
  }

  render() {
    return (
      <div>
        <div className={styles.main} ref={(e) => (this.e = e)}>
          <div className={styles.search}>
            <div className={styles.title}>
              <span>Annchain.OG区块链浏览器</span>
            </div>
            <div className={styles.subtitle}>
              <span>基于DAG的下一代高性能区块链基础设施</span>
            </div>
            <div className={styles.input}>
              <Search
                placeholder="搜索地址/高度/哈希值"
                enterButton="搜索"
                size="large"
                onSearch={this.searchClickHandler}
                style={{ width: 600 }}
              />
            </div>
          </div>
          <BlockchainExplorer/>
          <div className={styles.footer}>
            {/*<div className={styles.title}>*/}
            {/*  <span>他们眼中的众安链</span>*/}
            {/*</div>*/}
            {/*<div className={styles.subtitle}>*/}
            {/*  <span>主流媒体相关报道</span>*/}
            {/*</div>*/}
            {/*<div className={styles.organizations}>*/}

            {/*</div>*/}
            <div className={styles.title}>
              <span>Annchain.OG是众安信息技术服务有限公司研发的区块链技术协议</span>
            </div>
            {/*<div className={styles.links}>*/}
            {/*  <div>*/}
            {/*    <span>众安科技</span>*/}
            {/*  </div>*/}
            {/*  <div>*/}
            {/*    <span>安链云</span>*/}
            {/*  </div>*/}
            {/*  <div>*/}
            {/*    <span>微信</span>*/}
            {/*  </div>*/}
            {/*  <div>*/}
            {/*    <span>微博</span>*/}
            {/*  </div>*/}
            {/*</div>*/}
            <div className={styles.copyrights}>
              <span>©2017 Anlink众安信息技术服务有限公司版权所有 粤ICP备16087086号-6 粤公安网备44030502001034号</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const { data } = state.global;
  return {
    data
  };
}

export default connect(mapStateToProps)(IndexPage);
